<template>
    <el-dialog
        :title="title"
        append-to-body
        destroy-on-close
        :model-value="showDialog"
        @close="closeDialog()"
    >
        <!-- 表单 -->

        <el-form
            :model="form"
            ref="formRef"
            :rules="rules"
            :inline="false"
            label-width="120px"
        >
            <!--            <el-form-item label="仓库url" prop="url">-->
            <!--                <el-input v-model="url" placeholder="" clearable></el-input>-->
            <!--            </el-form-item>-->

            <el-form-item label="区域编码" prop="code" show-overflow-tooltip>
                <el-input v-model="code" placeholder="" clearable></el-input>
            </el-form-item>

            <el-form-item
                label="创建时间"
                prop="createTime"
                show-overflow-tooltip
            >
                <el-input
                    v-model="createTime"
                    placeholder=""
                    clearable
                ></el-input>
            </el-form-item>

            <el-form-item
                label="创建者"
                prop="createUserId"
                show-overflow-tooltip
            >
                <el-input
                    v-model="createUserId"
                    placeholder=""
                    clearable
                ></el-input>
            </el-form-item>

            <el-form-item label="区域图标" prop="icon" show-overflow-tooltip>
                <el-input v-model="icon" placeholder="" clearable></el-input>
            </el-form-item>

            <el-form-item label="主键" prop="id" show-overflow-tooltip>
                <el-input v-model="id" placeholder="" clearable></el-input>
            </el-form-item>

            <el-form-item
                label="是否删除"
                prop="isDeleted"
                show-overflow-tooltip
            >
                <el-input
                    v-model="isDeleted"
                    placeholder=""
                    clearable
                ></el-input>
            </el-form-item>

            <el-form-item label="区域名称" prop="name" show-overflow-tooltip>
                <el-input v-model="name" placeholder="" clearable></el-input>
            </el-form-item>

            <el-form-item
                label="修改时间"
                prop="updateTime"
                show-overflow-tooltip
            >
                <el-input
                    v-model="updateTime"
                    placeholder=""
                    clearable
                ></el-input>
            </el-form-item>

            <el-form-item
                label="修改者"
                prop="updateUserId"
                show-overflow-tooltip
            >
                <el-input
                    v-model="updateUserId"
                    placeholder=""
                    clearable
                ></el-input>
            </el-form-item>

            <el-form-item label="区域地址" prop="url" show-overflow-tooltip>
                <el-input v-model="url" placeholder="" clearable></el-input>
            </el-form-item>
        </el-form>

        <template v-slot:footer>
            <span>
                <el-button @click="closeDialog()">取消</el-button>
                <el-button type="primary" @click="onSubmit()">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup>
import { reactive, ref, toRefs, defineProps, defineEmits } from "vue";
import { ElMessage } from "element-plus";

const props = defineProps({
    showDialog: {
        type: Boolean,
        default: true,
    },
    title: {
        type: String,
        default: "添加",
    },
    rowData: {
        type: Object,
        default: null,
    },
});
const emit = defineEmits(["closeDialog"]);
const { title, rowData } = toRefs(props);
const closeDialog = () => {
    emit("closeDialog", false);
};

// const form = reactive({
//   url: "",
//   username: "",
//   password: "",
//   isDefault: false,
// });
const form = reactive({
    code: "",
    createTime: "",
    createUserId: "",
    icon: "",
    id: "",
    isDeleted: "",
    name: "",
    updateTime: "",
    updateUserId: "",
    url: "",
});
// const { url, username, password, isDefault } = toRefs(form);
const {
    code,
    createTime,
    createUserId,
    icon,
    id,
    isDeleted,
    name,
    updateTime,
    updateUserId,
    url,
} = toRefs(form);
const formRef = ref(null);

// const rules = {
// url: [
//     {
//         required: true,
//         message: "请输入仓库url",
//         trigger: "blur",
//     },
// ],
//  }
const rules = {
    code: [
        {
            required: true,
            message: "请输入区域编码",
            trigger: "blur",
        },
    ],
    createTime: [
        {
            required: true,
            message: "请输入创建时间",
            trigger: "blur",
        },
    ],
    createUserId: [
        {
            required: true,
            message: "请输入创建者",
            trigger: "blur",
        },
    ],
    icon: [
        {
            required: true,
            message: "请输入区域图标",
            trigger: "blur",
        },
    ],
    id: [
        {
            required: true,
            message: "请输入主键",
            trigger: "blur",
        },
    ],
    isDeleted: [
        {
            required: true,
            message: "请输入是否删除",
            trigger: "blur",
        },
    ],
    name: [
        {
            required: true,
            message: "请输入区域名称",
            trigger: "blur",
        },
    ],
    updateTime: [
        {
            required: true,
            message: "请输入修改时间",
            trigger: "blur",
        },
    ],
    updateUserId: [
        {
            required: true,
            message: "请输入修改者",
            trigger: "blur",
        },
    ],
    url: [
        {
            required: true,
            message: "请输入区域地址",
            trigger: "blur",
        },
    ],
};

/**
 * @description: 数据初始化
 * @param {*}
 * @return {*}
 * rowData.value &&
 *     (
 *         (url.value = rowData.value.url),
 *     (username.value = rowData.value.username),
 *     (password.value = rowData.value.password),
 *     (isDefault.value = rowData.value.isDefault)
 *     );
 */
rowData.value &&
    ((code.value = rowData.value.code),
    (createTime.value = rowData.value.createTime),
    (createUserId.value = rowData.value.createUserId),
    (icon.value = rowData.value.icon),
    (id.value = rowData.value.id),
    (isDeleted.value = rowData.value.isDeleted),
    (name.value = rowData.value.name),
    (updateTime.value = rowData.value.updateTime),
    (updateUserId.value = rowData.value.updateUserId),
    (url.value = rowData.value.url));
/**
 * @description:提交
 * @param {*}
 * @return {*}
 */
const onSubmit = () => {
    formRef.value.validate(async (valid) => {
        if (valid) {
            try {
                let res;
                if (title.value === "添加") {
                    res = await VE_API.SysZoneApi.sysZoneStory(form);
                } else {
                    res = await VE_API.SysZoneApi.sysZoneStory({
                        id: rowData.value.id,
                        ...form,
                    });
                }
                const { code } = res;
                if (code === 0) {
                    ElMessage.success(
                        title.value === "添加" ? "添加成功" : "编辑成功",
                    );
                    closeDialog();
                } else {
                    // 业务错误已在axios拦截器中处理
                    console.warn("保存区域失败:", code);
                }
            } catch (error) {
                // 网络错误等异常情况已经在axios拦截器中处理
                console.error("保存区域异常:", error);
            }
        } else {
            console.log("error submit!!");
            return false;
        }
    });
};
</script>

<style lang="scss">
.fl {
    float: left;
}
.p0 {
    padding: 0 !important;
}
.role_edit_item {
    width: 100%;
}
</style>
